import React ,{useEffect,useState}from 'react'
import * as api from "../../api/index"
import { Sidebar, Toast,ProductCard } from 'react-vant';
// import {get_tabBar} from "../../api/index"
import My_empty from '../../components/My_empty';
import Tab_contents from '../../components/Tab_contents';
function Home() {
    const [data,setData] = useState([])
    const [childrendata,setchildrendata] = useState([])
    const [active, setActive] = useState(0);

    useEffect(()=>{
                // console.log(api);
        (async()=>{
            const data = await api.get_tabBar()
            // console.log(data.data.list);
            setData(data.data.list)
            setchildrendata(data.data.list[0].children)
        })()

     
        // fn()
   
        //    const data = await api.get_tabBar()
        //     console.log(data);
    },[])
    // const fn = async () =>{
    //     const data = await api.get_tabBar()
    //     console.log(data.data.list);
    // }
    return (
        <div className="home">
            <Sidebar
                value={active}
                onChange={(v) => {
                    console.log(v);
                    setActive(v);
                    setchildrendata(data[v].children)
                }}
                >
                {
                    data&&data.map((item,index)=>{
                        return  <Sidebar.Item key={index} contentStyle={{ backgroundColor: '#fff', padding: '18px 10px' }} title={item.title}>
                            {
                                childrendata&&childrendata.length>0?childrendata.map((val,i)=>{
                                    return <Tab_contents key={i} val={val}/>
                                }):<My_empty str="没有内容区域数据啦"/>
                            }
                    </Sidebar.Item>
                    })
                }
            </Sidebar>
        </div>
    )
}

export default Home
